/**
 * @description 定义全局组件的插件使用方法
 */

// 引入组件,然后注册为一个全局组件
import MainLayout from './MainLayout'

// 定义一个处理时间的通用方法
const dateFormat = function (val, str) {
  // 获取到的是一个时间字符串，需要转为一个时间对象
  const _d = new Date(val)
  const YYYY = _d.getFullYear()
  let MM = _d.getMonth() + 1
  let DD = _d.getDate()
  let hh = _d.getHours()
  let mm = _d.getMinutes()
  let ss = _d.getSeconds()

  // 需要把一位的数字转为两位
  MM = MM > 9 ? MM : `0${MM}`
  DD = DD > 9 ? DD : `0${DD}`
  hh = hh > 9 ? hh : `0${hh}`
  mm = mm > 9 ? mm : `0${mm}`
  ss = ss > 9 ? ss : `0${ss}`

  // 需要把这些数据整理为一个对象
  const obj = { YYYY, MM, DD, hh, mm, ss }

  // 需要把处理后的数据返回去
  // return `${YYYY}年${MM}月${DD}日 ${hh}时${mm}分${ss}秒`
  // return `${MM}月${DD}日 ${hh}时`
  // return `${MM}-${DD} ${hh}`
  return str.replace(/(YYYY)|(MM)|(DD)|(hh)|(mm)|(ss)/g, function (_s) {
    return obj[_s]
  })
}

// 定义一个指令方法
const vFormat = {
  // inserted: function(el, bindData, newDom, oldDom) {
  // el:代表元素
  // bindData:获取到的时间数据
  inserted (el, bindData, newDom, oldDom) {
    // 可以调用通用方法来获取时间
    const res = dateFormat(bindData.value, 'MM月DD日 hh时mm分')
    // 它是把所有的东西都给到开发，需要开发去对虚拟dom进行渲染等控制
    // 可以给元素赋值
    el.innerText = `提货时间：${res}`
  }
}

// 定义函数插件
function plugin (VueConstructor) {
  // 定义全局组件
  VueConstructor.component('MainLayout', MainLayout)
  // 注册一个过滤器
  VueConstructor.filter('dateFormat', dateFormat)
  // 注册一个指令
  // 第一个参数是指令名字,第二个参数可以是一个过滤器方法,以可以是一个对象
  VueConstructor.directive('format', vFormat)
}

export default plugin
